<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="fontface/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/video-js.min.css">

    <!-- <link rel="stylesheet" href="css/share.css"> -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/ly.css">

    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/share.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/video.min.js"></script>

    <title>首页</title>
</head>

<body>
    <div class="flex">
        <!--菜单-->
        <div class="cp-menu">
            <div class="cp-menu-icon flex flex-pac cff">
                教师端
            </div>
            <ul class="nav">
                <li class="nav-item">
                    <div class="flex flex-ac plr20">
                        <img class="mr10"
                            src=""
                            alt="">
                        <span class="flex-f1">任务管理</span> <i class="lxjiconfont xiangyou1"></i>
                    </div>
                    <ul class="sub active">
                        <li><a href="查看专题.html" class="sub-item active">查看专题</a></li>
                        <li><a href="查看任务.html" class="sub-item">查看任务</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="flex flex-ac plr20">
                        <img class="mr10"
                            src=""
                            alt="">

                        <span class="flex-f1">班级管理</span> <i class="lxjiconfont xiangyou1"></i>
                    </div>
                    <ul class="sub">
                        <li><a href="查看班级.html?nav=1&sub=0" class="sub-item active">查看班级</a></li>
                        <li><a href="绑定学生.html" class="sub-item">绑定学生和专题</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="flex flex-ac plr20">
                        <img class="mr10"
                            src=""
                            alt="">

                        <span class="flex-f1">学生管理</span> <i class="lxjiconfont xiangyou1"></i>
                    </div>
                    <ul class="sub">
                        <li><a href="学生管理.html?nav=2&sub=0" class="sub-item active">学生管理</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="flex flex-ac plr20">
                        <img class="mr10"
                            src=""
                            alt="">

                        <span class="flex-f1">设备管理</span> <i class="lxjiconfont xiangyou1"></i>
                    </div>
                    <ul class="sub">
                        <li><a href="" class="sub-item active">设备管理</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--内容-->
        <div class="cp-container">
            <!--头部-->
            <header class="cp-header flex flex-ac">
                <div class="cp-header-content flex-f1">
                    学生管理
                </div>
                <img class="cp-header-img" src="./images/banner.png" alt="">
                <p class="cp-header-name mr10">liyang</p>
                <input type="submit" class="login-out flex flex-pac" value="退出">
            </header>
            <!--面包屑-->
            <div class="el-breadcrumb flex flex-ac">
                学生管理 <span>/</span> 班级一 <span>/</span> 张三 <span>/</span> 任务一
            </div>
            <div class="teacher-warp por">
                <!--task-->
                <div class="task-box plr30">
                    <div class="">
                        <div class="flex">
                            <div class="task-left"><img src="./images/banner.png" alt=""></div>
                            <div class="task-right flex-f1">
                                <div class="task-right-title flex flex-ac mb40">
                                    <p class="flex-f1 flex-te lh1 mr10">这里是任务标题</p>
                                    <!--<div class="flex flex-ac"><span class="fz20 c99">星级：</span>-->
                                    <!--<ul class="flex flex-ac">-->
                                    <!--<li class="task-score"><img src="./images/xing.png" alt=""></li>-->
                                    <!--<li class="task-score"><img src="./images/xing3.png" alt=""></li>-->
                                    <!--<li class="task-score"><img src="./images/xing2.png" alt=""></li>-->
                                    <!--</ul>-->
                                    <!--</div>-->
                                </div>
                                <div class="fz20 c99 mb20">任务需求：</div>
                                <div class="demand word-break">

                                    这里是任务需求这里是任务需求这里是任务需求这里是任务需求这里是任务需求这里是
                                    任务需求这里是任务需求这里是任务需求这里是任务需求这里是任务需求这里是任务需
                                    求这里是任务需求..

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--video-->
                <div class="task-video plr30">
                    <div class="">
                        <div class="flex">
                            <div class="task-video-left mr47">
                                <div class="task-video-left-title mb34">
                                    <span class="fz20 c-333743 mr30 task-title-tip">演示视频</span>
                                    <span class="fz20 c-E6E7ED">Demo video</span>
                                </div>
                                <div class="video-play-box">
                                    <video id="my-video" class="video-js" controls preload="none" width="393"
                                        height="349" poster="" data-setup="{}">
                                        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                                        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                                        <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                                        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider
                                            upgrading to
                                            a web
                                            browser that <a href="http://videojs.com/html5-video-support/"
                                                target="_blank">supports
                                                HTML5
                                                video</a></p>
                                    </video>
                                </div>
                            </div>
                            <div class="task-video-right flex-f1">
                                <div class="task-video-left-title mb34">
                                    <span class="fz20 c-333743 mr30 task-title-tip">参考截图</span>
                                    <span class="fz20 c-E6E7ED">Reference screenshots</span>
                                </div>
                                <div class="task-video-right-pic">
                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide por">
                                                <a href="首页.html?id=1" class="banner-img">
                                                    <img src="./images/banner.png" alt="">
                                                </a>
                                            </div>
                                            <div class="swiper-slide por">
                                                <a href="首页.html?id=2" class="banner-img">
                                                    <img src="./images/banner.png" alt="">
                                                </a>
                                            </div>
                                            <div class="swiper-slide por">
                                                <a href="首页.html?id=3" class="banner-img">
                                                    <img src="./images/banner.png" alt="">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-button-prev" tabindex="0" role="button"
                                        aria-label="Previous slide" aria-disabled="true"></div>
                                    <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
                                        aria-disabled="false"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--知识点讲解-->
                <div class="knowledge-box plr30">
                    <div class="">
                        <div class="flex">
                            <div class="knowledge-left mr47">
                                <div class="mb34">
                                    <span class="fz20 c-333743 mr30 task-title-tip">任务知识点讲解</span>
                                    <span class="fz20 c-E6E7ED">Task knowledge points</span>
                                </div>

                                <ul class="knowledge-item-content-box mb20 scrollbar">
                                    <li class="knowledge-item-content">
                                        <div class="knowledge-item-content-img mb20">
                                            <img src="./images/banner2.png" alt="">
                                        </div>
                                        <div class="fz14 c33 lh30">
                                           1111111111述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
                                        </div>
                                    </li>
                                    <li class="knowledge-item-content active">
                                        <div class="knowledge-item-content-img mb20">
                                            <img src="./images/banner.png" alt="">
                                        </div>
                                        <div class="fz14 c33 lh30">
                                           2222222222222述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
                                        </div>
                                    </li>
                                </ul>
                                <div class="knowledge-item-list h200 scrollbar">
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                    <a href="" class="fz18 c33 mb10 knowledge-item">这里是知识点标题</a>
                                </div>
                            </div>
                            <div class="knowledge-right flex-f1">
                                <ul class="knowledge-right-box scrollbar">
                                    <li>
                                        <a href="" class="knowledge-right-list flex">
                                            <div class="knowledge-right-list-img"><img src="./images/banner.png" alt="">
                                            </div>
                                            <div class="knowledge-right-list-info flex-f1 mr30">
                                                <p class="flex-te fz18 c00 lh1 mb10">这里是知识点标题这里是知识点标题</p>
                                                <p class="flex-te3 fz14 lh25 cb1">
                                                    这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
                                                    容这里是内容这里是内容这里是内容这里是内容这里是....
                                                </p>
                                            </div>
                                            <div class="knowledge-right-list-btn"><img src="./images/xiazai2.png"
                                                    alt=""></div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="" class="knowledge-right-list flex">
                                            <div class="knowledge-right-list-img"><img src="./images/banner.png" alt="">
                                            </div>
                                            <div class="knowledge-right-list-info flex-f1 mr30">
                                                <p class="flex-te fz18 c00 lh1 mb10">这里是知识点标题这里是知识点标题</p>
                                                <p class="flex-te3 fz14 lh25 cb1">
                                                    这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
                                                    容这里是内容这里是内容这里是内容这里是内容这里是....
                                                </p>
                                            </div>
                                            <div class="knowledge-right-list-btn"><img src="./images/xiazai2.png"
                                                    alt=""></div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="" class="knowledge-right-list flex">
                                            <div class="knowledge-right-list-img"><img src="./images/banner.png" alt="">
                                            </div>
                                            <div class="knowledge-right-list-info flex-f1 mr30">
                                                <p class="flex-te fz18 c00 lh1 mb10">这里是知识点标题这里是知识点标题</p>
                                                <p class="flex-te3 fz14 lh25 cb1">
                                                    这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
                                                    容这里是内容这里是内容这里是内容这里是内容这里是....
                                                </p>
                                            </div>
                                            <div class="knowledge-right-list-btn"><img src="./images/xiazai2.png"
                                                    alt=""></div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="" class="knowledge-right-list flex">
                                            <div class="knowledge-right-list-img"><img src="./images/banner.png" alt="">
                                            </div>
                                            <div class="knowledge-right-list-info flex-f1 mr30">
                                                <p class="flex-te fz18 c00 lh1 mb10">这里是知识点标题这里是知识点标题</p>
                                                <p class="flex-te3 fz14 lh25 cb1">
                                                    这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内
                                                    容这里是内容这里是内容这里是内容这里是内容这里是....
                                                </p>
                                            </div>
                                            <div class="knowledge-right-list-btn"><img src="./images/xiazai2.png"
                                                    alt=""></div>
                                        </a>
                                    </li>
                                </ul>
                                <a href="#" class="download-btn flex flex-pac"><i class="download-btn-img"><img
                                            src="./images/xiazai.png" alt=""></i>下载全部</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 任务说明 -->
                <div class="explain-box plr30">
                    <div class="flex flex">
                        <div class="explain-left mr47">
                            <div class="mb25">
                                <span class="fz20 c-333743 mr30 task-title-tip">任务说明</span>
                                <span class="fz20 c-E6E7ED">Mission statement</span>
                            </div>
                            <textarea placeholder="这里是任务点评内容..." class="knowledge-left-area"></textarea>
                            <!--<div class="knowledge-left-btn flex flex-pac">提交任务</div>-->
                        </div>
                        <div class="explain-right flex-f1">
                            <div class="mb25">
                                <span class="fz20 c-333743 mr30 task-title-tip">QA库</span>
                                <span class="fz20 c-E6E7ED">QA Library</span>
                            </div>
                            <div>
                                <ul class="knowledge-left-area-box">
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                    <li class="mb10">
                                        <div class="question fw-b fz16 c33 word-break mb10">问题</div>
                                        <div class="answer fz16 c33 word-break">答案</div>
                                    </li>
                                </ul>

                            </div>
                            <!-- <textarea placeholder="这里是任务点评内容..." class="knowledge-left-area"></textarea> -->
                            <div class="flex flex-ac">
                                <div class="answer-btn knowledge-left-btn flex flex-pac mr30">回答问题</div>
                                <!--<div class="knowledge-left-btn2 flex flex-pac">向老师提问</div>-->
                            </div>
                        </div>
                    </div>
                </div>

                <!--任务评分-->
                <div class="review-box-score">
                    <div class="">
                        <div class="mb25">
                            <span class="fz20 c-333743 mr30 task-title-tip">任务评分</span>
                            <span class="fz20 c-E6E7ED">Mission review</span>
                        </div>
                        <textarea class="review-area-score" placeholder="请给任务打分（1-5分）"></textarea>

                    </div>
                </div>
                <!-- 任务点评 -->
                <div class="review-box plr30">
                    <div class="">
                        <div class="mb25">
                            <span class="fz20 c-333743 mr30 task-title-tip">任务点评</span>
                            <span class="fz20 c-E6E7ED">Mission review</span>
                        </div>
                        <textarea class="review-area" placeholder="这里是任务点评内容..."></textarea>
                        <input type="submit" value="提交" class="knowledge-left-btn flex flex-pac mt20">

                    </div>
                </div>
                <!-- 回答问题   -->
                <div class="answer-mask">
                    <div class="answer-content">
                        <textarea type="text" placeholder="请输入问题的回复"></textarea>
                        <div class="flex flex-ac">
                            <div class="answer-submit knowledge-left-btn mr30 flex flex-pac">回复</div>
                            <div class="answer-cancel knowledge-left-btn2 flex flex-pac">取消</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    $(function () {
        //从url里边拿数据
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var navIndex = 0, subItemIndex = 0;
        navIndex = GetQueryString("nav");
        subItemIndex = GetQueryString("sub");
        console.log(navIndex, subItemIndex);

        $('.nav .nav-item').eq(navIndex).siblings().children(".sub").slideUp(0)
        $('.nav .nav-item').eq(navIndex).addClass("active").find('.sub').addClass("active")
        $('.nav .nav-item').click(function () {
            $(this).children().slideDown(1000)
            $(this).siblings().children(".sub").slideUp(1000)
        })

        //切换标题描述

        $('.knowledge-item').hover(function () {
            var index = $(this).index()
            $('.knowledge-item-content').eq(index).addClass('active').siblings().removeClass('active');

        })

        //问题弹窗
        $('.answer-btn').click(function () {
            console.log(123)
            $('.answer-mask').addClass("active")
        })
        $('.answer-cancel').click(function () {
            $('.answer-mask').removeClass("active")
        })
        // banner
        var mySwiper = new Swiper('.swiper-container', {
            watchSlidesProgress: !0,
            slidesPerView: "auto",
            centeredSlides: !0,
            loop: !0,
            loopedSlides: 5,
            autoplay: {
                autoplay: 0,
                delay: 14e3,
                disableOnInteraction: !1
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            slideToClickedSlide: !0,

        })
        // video
        var myPlayer = videojs('my-video');
        videojs("my-video").ready(function () {
            var myPlayer = this;
            myPlayer.play();
        });
        var myPlayer2 = videojs('my-video2');
        videojs("my-video2").ready(function () {
            var myPlayer2 = this;
            myPlayer2.play();
        });


    })
</script>